<template>
  <business-layout title='历史数据' custom-title>
    <h3 class='title'>人员视频监控</h3>
    <a-tabs v-model='activeKey'>
      <a-tab-pane :key='0' tab='负一层监控视频'>
        <div class='video-container'>
          <div class='video-box'>
            <cus-player :ref='"video14"'></cus-player>
          </div>

          <div class='video-box'>
            <cus-player :ref='"video15"'></cus-player>
          </div>

          <div class='video-box'>
            <cus-player :ref='"video16"'></cus-player>
          </div>

          <div class='video-box'>
            <cus-player :ref='"video17"'></cus-player>
          </div>

          <div class='video-box'>
            <cus-player :ref='"video18"'></cus-player>
          </div>

          <div class='video-box'>
            <cus-player :ref='"video19"'></cus-player>
          </div>

          <div class='video-box'>
            <cus-player :ref='"video20"'></cus-player>
          </div>

          <div class='video-box'>
            <cus-player :ref='"video21"'></cus-player>
          </div>

          <div class='video-box'>
            <cus-player :ref='"video22"'></cus-player>
          </div>
        </div>

      </a-tab-pane>
      <a-tab-pane :key='1' tab='一层监控视频'>
        <div class='video-container'>

          <div class='video-box'>
            <cus-player :ref='"video0"'></cus-player>
          </div>
          <div class='video-box'>
            <cus-player :ref='"video1"'></cus-player>
          </div>
          <div class='video-box'>
            <cus-player :ref='"video2"'></cus-player>
          </div>
          <div class='video-box'>
            <cus-player :ref='"video3"'></cus-player>
          </div>

          <div class='video-box'>
            <cus-player :ref='"video4"'></cus-player>
          </div>
          <div class='video-box'>
            <cus-player :ref='"video5"'></cus-player>
          </div>
          <div class='video-box'>
            <cus-player :ref='"video6"'></cus-player>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane :key='2' tab='二层监控视频'>
        <div class='video-container'>
          <div class='video-box'>
            <cus-player :ref='"video7"'></cus-player>
          </div>
          <div class='video-box'>
            <cus-player :ref='"video8"'></cus-player>
          </div>
          <div class='video-box'>
            <cus-player :ref='"video9"'></cus-player>
          </div>
          <div class='video-box'>
            <cus-player :ref='"video10"'></cus-player>
          </div>
          <div class='video-box'>
            <cus-player :ref='"video11"'></cus-player>
          </div>

          <div class='video-box'>
            <cus-player :ref='"video12"'></cus-player>
          </div>
          <div class='video-box'>
            <cus-player :ref='"video13"'></cus-player>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </business-layout>
</template>

<script>
import { getAllRtspStream } from '@/api/videoLive'
import CusPlayer from './moudles/CusPlayer.vue'

export default {
  components: {
    CusPlayer
  },
  data() {
    return {
      activeKey: 0,
      selected: 3, //表格类型
      videoIndex: 0, //表格索引
      tableData: [], //列表
      selectValue: '', //当前选择的相机
      playUrl: '',//播放的url
      useffmpeg: false//使用ffmpeg
    }
  },
  computed: {
    resultTableData() {
      return this.tableData.filter(item => Number(item.group) === Number(this.activeKey))
    }
  },
  created() {
    this.getList()
  },
  watch: {
    resultTableData(val, oldVal) {
      // 销毁上一步的video
      this.destroyVideo(oldVal)
      if (val) {
        for (let i = 0; i < val.length; i++) {
          const selectValue = val[i].url
          const ref = 'video' + val[i].index
          const playUrl = window.PROJECT_CONFIG.VUE_APP_LIVE_PATH + '?url=' + selectValue
          this.$nextTick(() => {
            this.$refs[ref].createPlayer(playUrl, true, val[i].index)
          })
        }
      }
    }
  },
  methods: {
    getList() {
      getAllRtspStream().then(res => {
        this.tableData = res.map((item, index) => {
          return {
            ...item,
            index,
            key: item.url,
            label: item.remark + '--' + item.url
          }
        })
      })
    },
    destroyVideo(value) {
      for (let i = 0; i < value.length; i++) {
        const ref = 'video' + value[i].index
        this.$refs[ref].destroyVideo()
      }
    }
  }
}
</script>

<style lang='less' scoped>
.video-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(4, 1fr);
  grid-row-gap: 0px;
  grid-column-gap: 0px;

  .video-box {
    width: 384px;
    height: 216px;
    margin-bottom: 10px;
    padding-top: 20px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  }
}

.title {
  color: #1d3f90;
  padding-top: 10px;
  font-size: 25px;
}
</style>
